layui.config({
    base: ctx + 'static/lib/layui_exts/treetable/'
})
layui.use(['treeTable','layer','code','form'],function(){
    var $ = layui.$,
        form = layui.form,
        layer = layui.layer,
        treeTable = layui.treeTable;
    var	re = treeTable.render({
        elem: '#tree-table',
        top_value: 0,
        icon_key: 'name',
        primary_key: 'menuId',
        parent_key: 'parentId',
        url: ctx + 'sys/menu/list',
        is_checkbox: true,
        end: function(e){
            form.render();
        },
        cols: [
            {
                key: 'menuId',
                title: 'ID',
                width: '50px',
                align: 'center'
            },
            {
                key: 'name',
                title: '名称',
                width: '120px',
                template: function(item){
                    if(item.level == 0){
                        return '<span style="color:red;">'+item.name+'</span>';
                    }else if(item.level == 1){
                        return '<span style="color:green;">'+item.name+'</span>';
                    }else if(item.level == 2){
                        return '<span style="color:#aaa;">'+item.name+'</span>';
                    }
                }
            },
            {
                key: 'parentName',
                title: '上级菜单',
                width: '100px',
                align: 'center',
                template: function (item) {
                    if(item.parentName) {
                        return '<span>' + item.parentName + '</span>'
                    }else {
                        return ''
                    }
                }
            },
            {
                key: 'url',
                title: '路径',
                width: '210px',
                template: function (item) {
                    if (item.url) {
                        return '<div style="width: 210px; white-space: nowrap; min-width: 50px; word-break: break-all; overflow: hidden; text-overflow: ellipsis;">' + item.url + '</div>'
                    }else {
                        return ''
                    }
                }
            },
            {
                key: 'perms',
                title: '授权标志',
                width: '210px',
                template: function (item) {
                    if (item.perms) {
                        return '<div style="width: 210px; white-space: nowrap; min-width: 50px; word-break: break-all; overflow: hidden; text-overflow: ellipsis;">' + item.perms + '</div>'
                    }else {
                        return ''
                    }
                }
            },
            {
                key: 'type',
                title: '类型',
                width: '60px',
                align: 'center',
                template: function (item) {
                    if(item.type == 0) {
                        return '<span class="layui-badge layui-bg-orange">目录</span>';
                    }else if (item.type == 1) {
                        return '<span class="layui-badge layui-bg-green">路径</span>';
                    }else if (item.type == 2) {
                        return '<span class="layui-badge layui-bg-cyan">按钮</span>';
                    }
                }
            },
            {
                title: '操作',
                align: 'center',
                template: function(item){
                    return '<a class="layui-btn layui-btn-xs" lay-event="edit" onclick="edit(' + item.menuId + ')">编辑</a> | <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" onclick="del(' + item.menuId + ')">删除</a>';
                }
            }
        ]
    });

    $('#add-menu').click(function () {
        layer.open({
            title: false,
            type: 2,
            area: ['650px', '460px'],
            content: ctx + 'sys/menu-add.html',
            end: function () {
                location.reload();
            }
        })
    });

});

function edit(menuId) {
    layer.open({
        title: false,
        type: 2,
        area: ['650px', '460px'],
        content: ctx + 'sys/menu-edit.html?menuId=' + menuId,
        end: function () {
            location.reload();
        }
    })
}
function del(menuId) {
    layer.open({
        content: '删除后不可恢复，是否确认删除'
        ,btn: ['删除', '取消']
        ,yes: function(index, layero){
            axios.post(ctx + 'sys/menu/delete/' + menuId).then(function (res) {
                if(res.data.code == 0) {
                    layer.msg('删除成功');
                    location.reload();
                }else {
                    layer.msg(res.data.msg);
                }
            })
        }
        ,btn2: function(index, layero){
            //按钮【按钮二】的回调
        }
        ,cancel: function(){
            //右上角关闭回调
        }
    });
}
